<!--
 * @Descripttion:
 * @version: 1.0.0
 * @Author: htang
 * @Date: 2023-11-07 15:55:51
 * @LastEditors: htang
 * @LastEditTime: 2024-03-03 19:16:56
-->
<template>
  <div class="echarts-main jeecg-basic-table">
    <div class="tip">
      <span>工单统计</span>
      <span class="tip-img"></span>
    </div>
    <Pie :chartData="pieData" :option="option" :height="'75%'" />
  </div>
</template>

<script>
import { ref, defineComponent, onMounted } from 'vue';
import { orderTypeApi } from '/@/api/data-statistics/index';
import Pie from '/@/components/chart/Pie.vue';
import { useUserStore } from '/@/store/modules/user';
const userStore = useUserStore();
import moment from 'moment';
export default defineComponent({
  components: { Pie },
  setup(props) {
    let queryParam = ref({
      // 数据时间格式
      month: moment().format('YYYY-MM'),
    });

    const odrerTypeList = ref(userStore.dictItems.order_type);

    let COLORS = ['#1EF0D7', '#3D67FF', '#FFBF00'];
    let pieData = ref([
      // {
      //   name: '日常巡检',
      //   value: 75,
      //   label: {
      //     normal: {
      //       show: true,
      //       position: 'inner',
      //       formatter: '{d}%',
      //       color: '#fff',
      //       fontSize: '18px',
      //     },
      //   },
      // },
      // {
      //   name: '故障维修',
      //   value: 25,
      //   label: {
      //     normal: {
      //       show: true,
      //       position: 'inner',
      //       formatter: '{d}%',
      //       color: '#fff',
      //       fontSize: '18px',
      //     },
      //   },
      // },
    ]);

    let option = ref({
      legend: {
        orient: 'vertical',
        top: '40%',
        right: '10%',
        data: [],
      },
      grid: {
        top: '0%',
        bottom: '5%',
        left: '4%',
        right: '4%',
        containLabel: true,
      },
      series: [
        {
          type: 'pie',
          radius: '90%',
          center: ['30%', '50%'],
          data: [],
          selectedMode: 'single',
          minAngle: 20, // 设置扇区最小角度
          itemStyle: {
            normal: {
              color: (item) => {
                return COLORS[item.dataIndex % COLORS.length];
              },
            },
          },
          labelLine: { show: true },
          label: {
            show: true,
            formatter: '{b} \n ({d}%)',
            color: '#B1B9D3',
          },
        },
      ],
    });

    function init() {
      let data = {
        ...queryParam.value,
      };
      let orderList = odrerTypeList.value;
      option.value.legend.data = [];
      orderTypeApi(data).then((res) => {
        res.map((_) => {
          let info = orderList.find((k) => parseInt(k.value, 10) == _['type']);
          if (info) {
            option.value.legend.data.push(info.label);
            pieData.value.push({
              name: info.label,
              value: _.num,
              label: {
                normal: {
                  show: true,
                  position: 'inner',
                  formatter: '{d}%',
                  color: '#fff',
                  fontSize: '18px',
                },
              },
            });
          }
        });
      });
    }

    onMounted(() => {
      init();
    });

    return {
      pieData,
      option,
    };
  },
});
</script>

<style lang="less" scoped>
.echarts-main {
  width: 100%;
  height: 26vh;
  margin: 0 0 44px 0 !important;
  .tip {
    height: 40px;
    margin-bottom: 15px;
  }
}
</style>